<template>
<view class="container">
  <view class="swiper-container">
    <swiper :autoplay="true" :interval="3000" :circular="true">
      <swiper-item v-for="(item, index) in imgList" :key="index">
        <image :src="item" class="swiper-img" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
  </view>
   <view class="icon-container">
      <image v-for="(item, index) in iconList" :key="index" :src="item" class="icon" @click="switchTo(index)"></image>
	  <br>
	  <text class="f_text" v-for="(item, index) in f_text" :key="index">{{item}}</text>
    </view>
  <img class="img" :src="img" alt="img">
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        '/static/img1.jpg',
        '/static/img2.jpg',
        '/static/img3.jpg'
      ],
	  iconList: [ // 图标列表
        '/static/f_1.png',
        '/static/f_2.png',
        '/static/f_3.png',
        '/static/f_4.png'
      ],
	  f_text:[
		'政策',
		'产品',
		'科普',
		'新闻'
	  ],
	  img:'/static/f_img1.png'
    };
  },
  methods: {
    switchTo(index) {
      if(index == 0){
		this.img = '/static/f_img1.png'
	  }else if(index == 1){
		this.img = '/static/f_img2.jpg'
	  }else if(index == 2){
		this.img = '/static/f_img3.png'
	  }else if(index == 3){
		this.img = '/static/f_img4.png'
	  }
    }
  }

};
</script>

<style>
.container{
	position: relative;
	display: flex;
	flex-direction: column;
}
.swiper-container {
  width: 100%;
  height: 200px; 
}

.swiper-img {
  width: 100%;
  height: 100%;
}
.card1{
	height: 200px;
	width: 50%;
	background-color: #41a5ee;
	margin-top: 0%;
	border-radius: 20px;
	line-height: 50px;
}
.icon{
	height: 50px;
	width: 50px;
	margin-left: 20px;
	margin-top: -40px;
}
.f_text{
	margin-left: 35px;
}
.img {
  overflow: auto;
  height: 600px;
}
</style>
